<script>
  var html = "";
  $(function (){
      html += "<select id='versionId' name='versionId' class='form-select'>";
      <#if versionList?? && (versionList?size > 0)>
          <#list versionList as version>
            html += "<option value='${version.id}'>${version.name}</option>";
          </#list>
      </#if>
      html += "</select>";
  });

  function changeType(){
    var type = $("#type").val();
    $("#versionDivId").html(html);
    $("#maxmemoryPolicyDiv").attr("style","display:display");
  }
</script>

<div class="card-header">
    <h3 class="card-title">
      申请应用
      <font color='red' size="4">
        <#if success?? && (success == 1)>(更新成功)</#if>
      </font>
    </h3>
</div>

<div class="card-body">
    <!-- BEGIN FORM-->
    <form action="${request.contextPath}/admin/app/add" method="post"
          class="form-horizontal" onsubmit="return saveAppDesc()">
        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            应用名称<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <input type="text" name="name" id="appName" <#noparse>placeholder="${服务名}-${机房:js/tc}-${环境:online/test}"</#noparse>
                   class="form-control" onchange="checkAppNameExist('${request.contextPath}')"/>
            <span class="help-block">
                                          如：cachecloud-js-online，全局唯一
                                      </span>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            应用描述<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
                                      <textarea class="form-control" name="intro"
                                                rows="3" id="appIntro" placeholder="应用描述"></textarea>
            <span class="help-block">
                                          不超过128个字符，可以包含中文
                                      </span>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            存储种类:
          </label>
          <div class="col-md-5">
            <select id="type" name="type" class="form-select" onchange="changeType()">
              <option value="2">
                Redis-Cluster
              </option>
              <option value="5">
                Redis-Sentinel
              </option>
              <option value="6">
                Redis-Standalone
              </option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            空间总量<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <input type="text" name="memSize" id="memSize" placeholder="如：1/2/4/.../32" class="form-control"/>
            <span class="help-block">
                填写整数，单位GB
            </span>
          </div>

        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            项目负责人<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <select id="officer" name="officer" class="selectpicker col-md-12 border rounded" multiple data-live-search="true" title="请选择">
              <#list userList as user>
                <option data-icon="bi bi-person-fill" value="${user.id}">${user.chName}【${user.email}】</option>
              </#list>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            部署版本:
          </label>
          <div class="col-md-5" id="versionDivId">
            <select id="versionId" name="versionId" class="form-select">
              <#list versionList as version>
                <option value="${version.id}">${version.name}</option>
              </#list>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            测试:
          </label>
          <div class="col-md-5">
            <select id="isTest" name="isTest" class="form-select">
              <option value="0">
                否
              </option>
              <option value="1">
                是
              </option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            是否有数据备份:
          </label>
          <div class="col-md-5">
            <select id="hasBackStore" name="hasBackStore" class="form-select">
              <option value="1">
                是
              </option>
              <option value="0">
                否
              </option>
            </select>
            <span class="help-block">
                                          即是否用作数据缓存，有其他数据备份策略
                                      </span>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            是否需要持久化:
          </label>
          <div class="col-md-5">
            <select id="needPersistence" name="needPersistence" class="form-select">
              <option value="1">
                是
              </option>
              <option value="0">
                否
              </option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            是否需要slave节点:
          </label>
          <div class="col-md-5">
            <select id="needHotBackUp" name="needHotBackUp" class="form-select">
              <option value="1">
                是
              </option>
              <option value="0">
                否
              </option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            预估QPS<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <input type="text" name="forecaseQps" id="forecaseQps" value="800" class="form-control" onchange="testisNum(this.id)"/>
            <span class="help-block">
                                          预估QPS，如：800
                                      </span>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            预估条目数量:<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <input type="text" name="forecastObjNum" id="forecastObjNum" value="100000" class="form-control" onchange="testisNum(this.id)"/>
            <span class="help-block">
                                          预估键数量，如：100000
                                      </span>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            客户端机房:<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <select name="clientMachineRoom" id="clientMachineRoom" class="form-select">
              <#list roomList as room>
                <option value="${room.name}">${room.name} (${room.ipNetwork})</option>
              </#list>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            内存报警阀值<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <input type="text" name="memAlertValue" id="memAlertValue" value="90" class="form-control" onchange="testisNum(this.id)"/>
            <span class="help-block">
                                          例如：内存使用率超过90%报警，请填写90（<font color="red">大于100以上则不报警</font>）
                                      </span>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-form-label col-md-4 text-end">
            客户端连接数报警阀值<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <input type="text" name="clientConnAlertValue" id="clientConnAlertValue" value="2000" class="form-control" onchange="testisNum(this.id)"/>
            <span class="help-block">
                                          例如：如客户端连接数超过2000报警，填写2000
                                      </span>
          </div>
        </div>

        <div class="form-group row" id="maxmemoryPolicyDiv">
          <label class="col-form-label col-md-4 text-end">
            淘汰策略<font color='red'>(*)</font>:
          </label>
          <div class="col-md-5">
            <select name="maxmemoryPolicy" id="maxmemoryPolicy" class="form-select">
              <#list policyList as policy>
                <#if (policy.type == 4)>
                    <option value="${policy.type}" selected>${policy.name()} (${policy.desc})</option>
                <#else>
                    <option value="${policy.type}">${policy.name()} (${policy.desc})</option>
                </#if>
              </#list>
            </select>
          </div>
        </div>

        <input name="userId" id="userId" value="${userInfo.id}" type="hidden" />
        <input id="appExist" value="0" type="hidden" />

        <div class="form-actions fluid">
            <div class="text-center">
              <button type="submit" class="btn btn-info">
                <i class="bi bi-check"></i>
                提交申请
              </button>
            </div>
        </div>
    </form>
    <!-- END FORM-->
</div>